import React, { Component } from 'react'
import { Spin } from 'antd'
import { message } from 'antd'
import './index.css'

/**
 * 顶部导航栏
 * @author liu_jshan
 * @version 1.2 2024-2-12
 * @props {
 *  navItem: 导航栏元素 对象
 *  {
 *    key: 元素唯一标识 必须 string
 *    content: 元素内容 string 或 组件
 *    style: 元素样式 string
 *    className: 追加类名
 *  }
 *  style：导航栏样式
 * }
 */
class NavigationBar extends Component {

  render() {
    if (!Array.isArray(this.props.navItem) || this.props.navItem.length === 0) {
      message.warning('请配置导航参数项')
      return <Spin />
    }
    return (
      <div className='navigation-main' style={this.props.style}>
        {
          this.props.navItem.map(item => {
            return (
              <div
                key={item.key}
                className={item.className ? 'navigation-item ' + item.className : 'navigation-item'}
                style={item.style}
              >
                {item.content}
              </div>
            )
          })
        }
      </div>
    )
  }
}

export default NavigationBar
